<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
       <h3>{{num}}</h3> 
    </div>
</body>
<script>
    new  Vue({
        // el:"#app",
        template:"<div>{{num}}</div>",//模板 h3标签将会被替代
        data:{
            num:10
        },
        beforeCreate(){//生命周期 又叫钩子函数
           //表示vue实例 完成
           console.log(this.num);   //内部的数据(data) 还没有给this
        },
        created(){//表示vue的实例彻底的完成  可以通过this找到data中的数据
            //也就可以开始进行异步请求数据
            // console.log(this.num);
            setTimeout(()=>{ //setTimeout用来模拟的是 异步请求
                this.num = 888;
            },4000)
        },
        beforeMount(){//同步页面结构加载完成以前
            console.log("1");
        },
        mounted(){//页面结构加载完成 也可以请求数据  也可以进行dom的时间绑定  定时器
            // 窗口的滚动条事件 window.onscroll
            console.log("2");
            this.timer = setInterval(()=>{
                this.num++;
            },2000)
        },
        beforeUpdate(){
            console.log("3");
        },
        updated(){
            console.log("4");
        },
        beforeDestroy(){
            console.log("5");
        },
        destroyed(){
           console.log("6"); 
        }


    }).$mount("#app")

</script>
</html>